<template>
	<navigatorComp title="查看明细" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<view class="display_flex coinDetail_tab">
		<up-tabs
			:current="currentTab"
			lineWidth="48rpx"
			lineHeight="6rpx"
			:activeStyle="{ color: '#fff' }"
			:inactiveStyle="{ color: '#666666' }"
			itemStyle="font-weight: 500;font-size: 36rpx;margin-bottom:18rpx;width:170rpx;"
			lineColor="#F3E0BB"
			:list="tablist"
			@click="clickTab"
		></up-tabs>
	</view>

	<mescroll-uni
		:height="height + 'px'"
		:up="upOption"
		@init="mescrollInit"
		@down="myDownCallback"
		@up="upCallback"
	>
		<view class="coinDetail_list">
			<view v-for="(item, index) in ybRecordList">
				<view class="coinDetail_item" v-if="item.recordType === 1">
					<view class="coinDetail_item_type1">
						<view>
							<view class="coinDetail_item_type1_title">充值</view>
							<view class="coinDetail_item_type1_time">
								{{ formatTimestamp2(item.timestamp) }}
							</view>
						</view>
						<view class="coinDetail_item_type1_price">+{{ item.recordNumber }}</view>
					</view>
				</view>
				<view class="coinDetail_item" v-if="item.recordType === 2">
					<view class="coinDetail_item_type1">
						<view>
							<view class="coinDetail_item_type1_title">邀请好友奖励</view>
							<view class="coinDetail_item_type1_time">
								{{ formatTimestamp2(item.timestamp) }}
							</view>
						</view>
						<view class="coinDetail_item_type1_price">+{{ item.recordNumber }}</view>
					</view>
				</view>
				<view class="coinDetail_item" v-if="item.recordType === 3">
					<view class="coinDetail_item_type1">
						<view>
							<view class="coinDetail_item_type1_title">系统奖励</view>
							<view class="coinDetail_item_type1_time">
								{{ formatTimestamp2(item.timestamp) }}
							</view>
						</view>
						<view class="coinDetail_item_type1_price">+{{ item.recordNumber }}</view>
					</view>
				</view>
				<!-- 购买-装修4 购买-祭品5 购买-香油6 -->
				<view
					class="coinDetail_item"
					v-if="
						item.recordType === 4 ||
						item.recordType === 5 ||
						item.recordType === 6 ||
						item.recordType === 13
					"
				>
					<view class="coinDetail_item_type2">
						<view class="coinDetail_item_type2_titleBox">
							<view class="coinDetail_item_type2_title">购买</view>
							<view class="coinDetail_item_type2_price">{{ item.recordNumber }}</view>
						</view>
						<view class="coinDetail_buyList">
							<view class="coinDetail_buyItem" v-for="(i, key) in item.buyRecordList">
								<view>{{ i.goodsName }}</view>
								<view>{{ i.ybPrice }}福币</view>
								<view>{{ i.lifespan != 0 ? i.lifespan + '天' : '永久' }}</view>
								<view class="display_flex" style="justify-content: flex-start">
									<up-icon name="close" color="#FFFFFF" size="12"></up-icon>
									{{ i.goodsNumber }}
								</view>
							</view>
						</view>
						<view class="coinDetail_item_type2_time">
							{{ formatTimestamp2(item.timestamp) }}
						</view>
					</view>
				</view>
				<!-- 购买-香13 -->
				<view class="coinDetail_item" v-if="item.recordType === 13">
					<view class="coinDetail_item_type2">
						<view class="coinDetail_item_type2_titleBox">
							<view class="coinDetail_item_type2_title">购买</view>
							<view class="coinDetail_item_type2_price">{{ item.recordNumber }}</view>
						</view>
						<view class="coinDetail_buyList">
							<view class="coinDetail_buyItem">
								<view>{{ item.buyRecord }}</view>
								<view>{{ Math.abs(item.recordNumber) }}福币</view>
								<view>
									{{
										item.buyRecord === '高级香'
											? '12小时'
											: item.buyRecord === '中级香'
											? '6小时'
											: '1小时'
									}}
								</view>
								<view class="display_flex" style="justify-content: flex-start">
									<up-icon name="close" color="#FFFFFF" size="12"></up-icon>
									{{ item.goodsNumber }}
								</view>
							</view>
						</view>
						<view class="coinDetail_item_type2_time">
							{{ formatTimestamp2(item.timestamp) }}
						</view>
					</view>
				</view>
				<!-- 创建祠堂7 创建墓地8 创建族谱9 -->
				<view
					class="coinDetail_item"
					v-if="item.recordType === 7 || item.recordType === 8 || item.recordType === 9"
				>
					<view class="coinDetail_item_type1">
						<view>
							<view class="coinDetail_item_type1_title">
								{{
									item.recordType === 7
										? '付费祠堂'
										: item.recordType === 8
										? '付费墓地'
										: '付费族谱'
								}}
							</view>
							<view class="coinDetail_item_type1_time">
								{{ formatTimestamp2(item.timestamp) }}
							</view>
						</view>
						<view class="coinDetail_item_type2_price">{{ item.recordNumber }}</view>
					</view>
				</view>
				<!--祭拜还愿10，祭拜解签11 -->
				<view
					class="coinDetail_item"
					v-if="item.recordType === 10 || item.recordType === 11"
				>
					<view class="coinDetail_item_type1">
						<view>
							<view class="coinDetail_item_type1_title">
								{{ item.recordType === 10 ? '还愿' : '解签' }}-{{ item.buyRecord }}
							</view>
							<view class="coinDetail_item_type1_time">
								{{ formatTimestamp2(item.timestamp) }}
							</view>
						</view>
						<view class="coinDetail_item_type2_price">{{ item.recordNumber }}</view>
					</view>
				</view>
				<!--积分兑换12 -->
				<view class="coinDetail_item" v-if="item.recordType === 12">
					<view class="coinDetail_item_type1">
						<view>
							<view class="coinDetail_item_type1_title">积分兑换</view>
							<view class="coinDetail_item_type1_time">
								{{ formatTimestamp2(item.timestamp) }}
							</view>
						</view>
						<view class="coinDetail_item_type1_price">+{{ item.recordNumber }}</view>
					</view>
				</view>
			</view>
		</view>
	</mescroll-uni>
</template>

<script setup>
import { onLoad, onReady } from '@dcloudio/uni-app';
import { ref, reactive, onMounted } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import { formatTimestamp2 } from '@/utils/time.js';
import MineApi from '@/API/mine';
const mineApi = new MineApi();

// 类型
// 福币记录相关
// const (
//     YbRecord_Recharge            = 1  //充值
//     YbRecord_Invite              = 2  //邀请好友奖励
//     YbRecord_System              = 3  //系统奖励
//     YbRecord_Purchase_Decoration = 4  //购买-装修
//     YbRecord_Purchase_Offering   = 5  //购买-祭品
//     YbRecord_Purchase_Oil        = 6  //购买-香油
//     YbRecord_Create_Hall         = 7  //创建祠堂
//     YbRecord_Create_Memorail     = 8  //创建纪念馆/墓地
//     YbRecord_Create_Genealogy    = 9  //创建族谱
//     YbRecord_Huanyuan_Price      = 10 //祭拜里还愿
//     YbRecord_Jieqian_Price       = 11 //祭拜里解签
//     YbRecord_Exchange            = 12 //兑换
//     YbRecord_Purchase_Incense    = 13 //购买-香
// )

const tablist = reactive([
	{
		name: '全部记录'
	},
	{
		name: '获取记录'
	},
	{
		name: '消耗记录'
	}
]);
const currentTab = ref(0); //默认为创建的纪念馆，0

const { mescrollInit, downCallback, getMescroll } = useMescroll(); // 调用mescroll的hook
const upOption = {
	page: {
		size: 10 // 每页数据的数量
	},
	noMoreSize: 4 //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
	// empty: {
	// 	use: false //不显示空图
	// }
};
const lastId = ref(0); //最后一个元素的id
const height = ref(0); //列表高度

const ybRecordList = ref([]); //recordType 1:充值，2:邀请好友奖励，3:系统奖励，4:购买-装修，5:购买-祭品

onMounted(() => {
	// #ifdef APP-PLUS || H5
	uni.createSelectorQuery()
		.select('.coinDetail_tab')
		.boundingClientRect((res) => {
			height.value =
				uni.getSystemInfoSync().windowHeight -
				res.height -
				getApp().globalData.bottom -
				getApp().globalData.statusBarHeight;
		})
		.exec();
	// #endif

	// #ifdef MP-WEIXIN
	uni.createSelectorQuery()
		.select('.coinDetail_tab')
		.boundingClientRect((res) => {
			height.value =
				uni.getSystemInfoSync().screenHeight -
				getApp().globalData.bottom -
				res.height -
				getApp().globalData.navHeight -
				uni.upx2px(88);
		})
		.exec();
	// #endif
});

/**
 * 上拉加载
 */
const upCallback = (mescroll) => {
	mineApi
		.getYbRecord({
			lastId: lastId.value,
			getType: currentTab.value + 1
		})
		.then((res) => {
			const curPageData = res.data.ybRecordList || []; // 当前页数据
			console.log(curPageData);
			if (lastId.value === 0) ybRecordList.value = []; //如果是第一页需手动制空列表
			ybRecordList.value = ybRecordList.value.concat(curPageData); //追加新数据\
			if (curPageData.length > 0) {
				lastId.value = curPageData[curPageData.length - 1].id;
			}
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		})
		.catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		});
};

const myDownCallback = (mescroll) => {
	lastId.value = 0;
	downCallback();
};

const clickTab = (e) => {
	currentTab.value = e.index;
	myDownCallback();
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.coinDetail_tab {
	padding: 32rpx 0 24rpx;
}

.coinDetail_list {
	width: 100%;
	box-sizing: border-box;
	padding: 24rpx 32rpx;

	.coinDetail_item {
		width: 100%;
		background: #292b2a;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 32rpx 24rpx 32rpx 32rpx;
		box-sizing: border-box;
		margin-bottom: 16rpx;

		.coinDetail_item_type1 {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.coinDetail_item_type1_title {
				font-weight: 400;
				font-size: 32rpx;
				color: #ffffff;
				line-height: 44rpx;
				margin-bottom: 12rpx;
			}

			.coinDetail_item_type1_time {
				font-weight: 400;
				font-size: 24rpx;
				color: #c5c5c5;
				line-height: 34rpx;
			}

			.coinDetail_item_type1_price {
				font-weight: 500;
				font-size: 32rpx;
				color: #ff4c5a;
				line-height: 38rpx;
			}
		}

		.coinDetail_item_type2_price {
			font-weight: 500;
			font-size: 32rpx;
			color: #5bd465;
			line-height: 38rpx;
		}

		.coinDetail_item_type2 {
			width: 100%;

			.coinDetail_item_type2_titleBox {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.coinDetail_item_type2_title {
					font-weight: 400;
					font-size: 32rpx;
					color: #ffffff;
					line-height: 38rpx;
				}
			}

			.coinDetail_buyList {
				margin-top: 24rpx;

				.coinDetail_buyItem {
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					font-weight: 400;
					font-size: 28rpx;
					color: #ffffff;
					line-height: 28rpx;
					margin-bottom: 24rpx;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}

		.coinDetail_item_type2_time {
			margin-top: 24rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #c5c5c5;
			line-height: 34rpx;
		}
	}
}
</style>
